<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看店铺绩效" v-model="visible" append-to-body width="1000px" @close="handleClose">
    <el-tabs v-model="activeName" class="mb-3">
      <el-tab-pane label="不良交易表现" name="defect">
        <div class="border border-b-0">
          <div class="grid grid-cols-3">
            <div class="border-b p-2 bg-blue-50"></div>
            <div class="border-b p-2 bg-blue-50">当前</div>
            <div class="border-b p-2 bg-blue-50">说明</div>
          </div>
          <div class="grid grid-cols-3">
            <div class="border-b p-2">不良交易表现</div>
            <div class="border-b p-2">{{ defect.show?.current }}</div>
            <div class="border-b p-2">{{ defect.aaa }}</div>
            <div class="border-b p-2">不良交易率</div>
            <div class="border-b p-2">{{ defect.defect?.current }}</div>
            <div class="border-b p-2">{{ defect.aaa }}</div>
            <div class="border-b p-2">物品与描述不符退货率</div>
            <div class="border-b p-2">{{ defect.return?.current }}</div>
            <div class="border-b p-2">{{ defect.aaa }}</div>
            <div class="border-b p-2">物品未收到纠纷率</div>
            <div class="border-b p-2">{{ defect.dispute?.current }}</div>
            <div class="border-b p-2">{{ defect.aaa }}</div>
            <div class="border-b p-2">中差评率</div>
            <div class="border-b p-2">{{ defect.poor?.current }}</div>
            <div class="border-b p-2">{{ defect.aaa }}</div>
            <div class="border-b p-2">详细卖家评分低分率</div>
            <div class="border-b p-2">{{ defect.low_score?.current }}</div>
            <div class="border-b p-2">{{ defect.aaa }}</div>
            <div class="border-b p-2">缺货相关的取消交易率</div>
            <div class="border-b p-2">{{ defect.cancel?.current }}</div>
            <div class="border-b p-2">{{ defect.aaa }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="海外仓标准服" name="overseas">
        <div class="border border-b-0">
          <div class="grid" :style="{ gridTemplateColumns: `repeat(${overseas.length+2}, minmax(0, 1fr))` }">
            <div class="border-b p-2 bg-blue-50"></div>
            <div class="border-b p-2 bg-blue-50" v-for="(d, i) in overseas" :key="i">{{ d.site }}</div>
            <div class="border-b p-2 bg-blue-50">说明</div>
          </div>
          <div class="grid" :style="{ gridTemplateColumns: `repeat(${overseas.length+2}, minmax(0, 1fr))` }">
            <div class="border-b p-2">服务标准</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ d.site_info.action_status }}</div>
            </template>
            <div class="border-b p-2"></div>
            <div class="border-b p-2">合规刊登率</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ rate(d.site_info.correct_list_rate) }}</div>
            </template>
            <div class="border-b p-2"></div>
            <div class="border-b p-2">及时发货率</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ rate(d.site_info.ascan_ht_rate) }}</div>
            </template>
            <div class="border-b p-2"></div>
            <div class="border-b p-2">及时送达率</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ rate(d.site_info.dscan_edd_rate) }}</div>
            </template>
            <div class="border-b p-2"></div>
            <div class="border-b p-2">未收到纠纷率</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ rate(d.site_info.ship_defect_rate) }}</div>
            </template>
            <div class="border-b p-2"></div>
            <div class="border-b p-2">使用不合规渠道或服务问题</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ d.site_info.ilm_issue }}</div>
            </template>
            <div class="border-b p-2"></div>
            <div class="border-b p-2">对接仓使用率要求</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ rate(d.site_info.wh_network_trx_rate) }}</div>
            </template>
            <div class="border-b p-2"></div>
            <div class="border-b p-2">是否申诉</div>
            <template v-for="(d, i) in overseas" :key="i">
              <div class="border-b p-2">{{ d.site_info.appeal_flag }}</div>
            </template>
            <div class="border-b p-2"></div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import api from './api'
import XEUtils from 'xe-utils'
const load = ref(false)
const visible = ref(false)
const activeName = ref('defect')
const defect = ref({})
const overseas = ref({})

const emit = defineEmits(['close'])

// 打开弹窗
const open = async (shop_id) => {
  activeName.value = 'defect'
  defect.value = {}
  overseas.value = {}
  if (!load.value) {
    load.value = true
    await 1
  }
  try {
    const getDefect = await api.getDefect({ shop_id })
    const getOverseas = await api.getOverseas({ shop_id })
    defect.value = getDefect.data
    overseas.value = getOverseas.data
    visible.value = true
  } catch (error) {
    console.log('error', error)
  }
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const rate = (val) => {
  return val === 1 ? '100%' : val ? XEUtils.toFixed(val*100, 1) + '%' : '--'
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>